<template>
  <div>
    <!-- 轮播图组件 -->
    <div class="swiper-container" :class="swiperid">
      <div class="swiper-wrapper">
        <slot name="swiperwrapper"></slot>
 
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" v-if="paginationshow"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  props: {
    // 自动播放
    autoplay: {
      type: Boolean,default: false,
    },
    // 轮播图的唯一标识
    swiperid:{
        type:String,default:""
    },
    // 是否显示分页器
    paginationshow:{
        type:Boolean,default:true
    },
    // 分页器样式
    paginationtype:{
        type:String,default:"bullets"
    },
    // 切换效果
    effect:{
        type:String,default:"fade"
    }
  },
  mounted() {
    console.log(this.autoplay);
    var mySwiper = new Swiper("." + this.swiperid, {
      loop: true, // 循环模式选项
      autoplay:this.autoplay,
      effect:this.effect,
      // 如果需要分页器
      pagination: {
        el: "."+this.swiperid+" .swiper-pagination",
        type:this.paginationtype
      },
    });
  },
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 2rem;
}
.swiper-pagination{
  text-align: right;
}
</style>